<template>
	<view class="grade">
		<rank-tab :tabLists="tabLists"  :currentIndex="currentIndex" @tabChange="tabChange"/>
		<view class="grade-top">
			<!-- college_name: "治安学院"
			depart_name: "治安学"
			get_score: "82"
			province_name: "云南省"
			sname: "尹受贤"
			user_id: "74ab49331fbc405f9a1fd9120179def1" -->
			<view v-for="({sname,college_name,get_score},index) in top3" :key="index" class="grade-top-item">
				<view class="name">{{sname}}</view>
				<view class="class">{{college_name}}</view>
				<view class="grade" :class="[index==1?'grade-no1':'']">{{get_score}}</view>
			</view>
		</view>
		<view class="grade-bottom-ranks">
			<rank-item :rank="index+4" v-for="(item,index) in lastList" :key="index" class="grade-bottom-ranks-item" :item="item"></rank-item>
		</view>
		<view class="look-more" @click="lookMore">查看更多</view>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	import RankItem from './RankItem';
	import RankTab from '../tabs/rankTab.vue'
	
	export default {
		components: {
			RankItem,
			RankTab
		},
		props: {
			gradeData: {
				type: Array,
				default: function() {
					return []
				}
			},
			resetIndex:{
				type:Boolean,
				default: false
			}
		},
		// watch:{
		// 	resetIndex(newVal){
		// 		if(newVal){
		// 			this.tabChange(0);
		// 		}
		// 	}
		// },
		data() {
			return {
				tabLists:['班级排名','专业排名','省份排名','学校排名'],
				currentIndex:0
			}
		},
		computed: {
			top3() {
				if (isEmpty(this.gradeData)) {
					return;
				}
				let top = new Array(3);
				top[1] = this.gradeData[0];
				const dataLength = this.gradeData.length;
				if (dataLength == 1) {
					top[0] = {};
					top[2] = {};
				} else if (dataLength == 2) {
					top[0] = this.gradeData[1];
					top[2] = {};
				} else {
					top[0] = this.gradeData[1];
					top[2] = this.gradeData[2];
				}
				return top;
			},
			lastList() {
				return this.gradeData.filter((item, index) => index > 2);
			}
		},
		methods: {
			navigateToStudentDetail(item) {
				this.$emit('navigateToStudentDetail', item);
			},
			lookMore() {
				this.$emit('lookMore', this.currentIndex);
			},
			tabChange(index){
				this.currentIndex = index;
				this.$emit('getRankData',index,1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 成绩榜
	.grade {
		&-top {
			width: 690upx;
			height: 320upx;
			margin: 0 auto;
			background-image: url('~@/static/img/mine/rank-top-bg.jpg');
			background-size: 100% 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			padding: 0 20upx;
			margin-top: -5upx;

			&-item {
				margin-top: 180upx;
				font-size: 30upx;
				color: #333;
				flex: 1;
				flex-direction: column;
				font-weight: 700;
				text-align: center;
				// width: 224upx;
				overflow-x: hidden;
			}
		}

		&-bottom-ranks {
			padding: 0 30upx;

			&-item {
				// display: flex;
				// flex-direction: row;
				// justify-content: flex-start;
				font-size: 28upx;
				// align-items: center;
			}
		}
	}

	.grade {
		&-no1 {
			color: #ffa400;
		}
	}

	.avatar {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

// 	.right {
// 		display: block;
// 		display: flex;
// 		flex: 1;
// 		flex-direction: row;
// 		justify-content: space-around;
// 		padding: 20upx 0;
// 		align-items: center;
// 	}
// 
// 	.num {
// 		color: #999999;
// 		font-size: 28upx;
// 		width: 50upx;
// 		text-align: right;
// 	}
// 
// 	.line {
// 		margin-right: 22upx;
// 		margin-left: 22upx;
// 		color: #377cfd;
// 	}
// 
// 	.info {
// 		display: flex;
// 		flex-direction: column;
// 		flex: 1;
// 
// 
// 	}
// 
	.score {
		color: #377cfd;
		font-size: 32upx;
		font-weight: 700;
	}

	.class {
		font-size: 20upx;
		color: #999;
	}

	.look-more {
		font-size: 28upx;
		text-align: center;
		color: #999999;
		line-height: 80upx;
	}
	
	
</style>
